﻿@page "/dependency-explorer"
@using Dependify.Core
@using Dependify.Core.Graph
@using Dependify.Core.Serializers
@using Microsoft.Extensions.Options

@inject SolutionRegistry SolutionRegistry
@inject IOptions<MsBuildConfig> MsBuildConfig
@inject IDialogService DialogService

<PageTitle>Explorer</PageTitle>

<MudToolBar>
    <MudText Typo="Typo.h4">Explorer 🔎</MudText>
    <MudSpacer />
    <MudSwitch Size="Size.Medium" T="bool" ValueChanged="@(value => OnPackagesIncludedChangedAsync(value))"
        ThumbIcon="@(PackagesIncluded==true ? Icons.Material.Filled.Done : Icons.Material.Filled.Close)"
        ThumbIconColor="@(PackagesIncluded==true ? Color.Success : Color.Error)">
        <MudText Typo="Typo.subtitle2">Packages</MudText>
    </MudSwitch>

    <MudTooltip Text="Unselect All">
        <MudIconButton Icon="@Icons.Material.Outlined.CleaningServices" Size="Size.Medium" Color="Color.Primary"
            OnClick="@UnselectAll" />
    </MudTooltip>
    <MudTooltip Text="Copy Diagram to Clipboard">
        <MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Size="Size.Medium" Color="Color.Primary"
            OnClick="@CopyDiagramToClipboard" />
    </MudTooltip>
</MudToolBar>

<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
    <MudPaper Class="pa-4 ma-4" Elevation="3">
        @foreach (var nodeId in NodeIds)
        {
            <MudChip T="string" Color="@(SelectedNodeIds.Contains(nodeId) ? Color.Primary : Color.Default)"
                OnClick="@(async () => await ToggleIncludeAsync(nodeId))"
                Size="@(NodeIds.Count > 10 ? Size.Medium : Size.Large)" CloseIcon="@Icons.Material.Rounded.LibraryAdd"
                OnClose="@(async () => await IncludeDependencies(nodeId))"
                Variant="@(nodeId.EndsWith(".sln") ?   Variant.Outlined : Variant.Text)">
                @nodeId
            </MudChip>
        }
    </MudPaper>
    <div>
        <div style="margin: 15px;">
            <MudPaper Elevation="2">
                @if (!string.IsNullOrEmpty(DiagramContent))
                {
                    <div class="mermaid" style="text-align: center; margin: 10px; min-height: 200px;">
                        @DiagramContent
                    </div>
                }
            </MudPaper>
        </div>
    </div>
</MudContainer>
